<template>
	<view class="onebox">
		<image class="img-head" src="../../static/new/24.png" mode=""></image>
		<view class="middle">
			<view class="information">
				<image class="img-tx" :src="UserInfo.avatar" mode=""></image>
				<view v-if="user_id>0" class="gz-big">
					<view @click="GetAddFollowingt" class="gz box3" v-if="this.is_follow=='0'">
						+ 关注
					</view>
					<view @click="GetAddFollowingt" class="gz0 box3" v-if="this.is_follow=='1'">
						已关注
					</view>
				</view>
				<view class="text-nc">
					{{UserInfo.nickname}}
				</view>

			</view>
			<view class="text-information">
				{{UserInfo.signature}}
			</view>
		</view>
		<view class="box25 cssss" v-for="(item,index) in TzList" :key="index">
			<view class="box5">
				<view class="box5 box24" @click="tzHome()">
					<view>
						<image class="" style="width: 90rpx; height: 90rpx;margin-right: 20rpx; border-radius: 50%;" :src="item.avatar" mode=""></image>
					</view>
					<view class="">
						<view class="" style="font-size: 28rpx; font-weight: 600;">
							{{item.nickname}}
						</view>
						<view class="" style="font-size: 26rpx; color: #A3A2A2; margin-top: 16rpx;">
							发布于 {{ item.createtime | timeAgo }}
						</view>
					</view>
				</view>
				<!-- <view class="box7">
					<view class="">
						<image class="img3" src="../../static/syqt/gz.png" mode=""></image>
						<view class="" style="font-size: 26rpx; color: #26B8A5;">
							关注
						</view>
					</view>
				</view> -->
			</view>
			<view @click="tzDetails(item.avatar,item.nickname,item.id)" class="box5" style="margin: 20rpx 0;">
				<view class="" style="font-size: 28rpx;">
					{{item.content}}
				</view>
			</view>
			<view v-if="item.images.length>1" class="box88888">
				<view v-for="(items,index) in item.images" :key="index" style="margin-top: 30rpx;">
					<image class="img13" style="margin-right: 28rpx; " :src="items" mode="">
					</image>
				</view>
			</view>
			<view class="box5" style="margin: 20rpx 0rpx;">
				<view class="box5 box24">
					<image class="img14" src="../../static/syqt/fx.png" mode=""></image>
					<view class="text" style="font-size: 22rpx; color: #929090;">
						赞赏
					</view>

					<image class="img15" v-if="item.is_top==1" src="../../static/syqt/rm.png" mode=""></image>
					<view class="" v-if="item.is_top==1" style="font-size: 25rpx; color:  #ff7500;">
						置顶
					</view>
				</view>
				<view class="box5">
					<view class="box5">
						<image class="img14" src="../../static/syqt/pl.png" mode=""></image>
						<view class="" style="font-size: 22	rpx; color: #929090;">
							{{item.comment_num}}
						</view>
					</view>
					<view class="box5" style="margin-left: 30rpx;">
						<image v-if="item.zan=='0'" @click="GetAddZan(item.id,index)" class="img14"
							src="../../static/syqt/z.png" mode="">
							<!-- 已点赞 -->
							<image v-if="item.zan=='1'" @click="GetAddZan(item.id,index)" class="img18"
								src="../../static/good.png" mode="">
						<view class="" style="font-size: 22	rpx; color: #929090;">
							{{item.zan_num}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nomore">没有了</view>
	</view>
</template>

<script>
	import $api from '../../common/request3.js'
	export default {
		data() {
			return {
				search: '',
				school_id: '2',
				TzList: [],
				user_id: '',
				is_follow: '0', //是否关注，1已关注0未关注
				pdsu: '0',
				cover_image: '',
				UserInfo: "",
				openid: '123456',
				key: '123456',
				page:'1',
				"isHas": true,
			}
		},
		onLoad(op) {
			this.openid = uni.getStorageSync('openid');
			this.key = uni.getStorageSync('key');
			this.school_id = uni.getStorageSync('school_id');
			// this.school_id = op.school_id
			this.user_id = op.user_id
			this.pdsu = op.pdsu
			this.GetUserInfo()
			this.GetTzList()
			if(this.user_id>0){
				this.GetAddFollowingt()
			}
			

		},
		computed: {
			// 计算属性，用于动态显示用户的赞数
			userLikeCount() {
				return this.TzList[index]
			}
		},
		onReachBottom() {
			this.page++;
			this.GetTzList('add')
		},
		filters: {
			timeAgo(createtime) {
				const now = Date.now();
				const seconds = Math.floor((now - createtime * 1000) / 1000);

				let interval = seconds / 31536000;

				if (interval > 1) {
					return parseInt(interval) + "年前";
				}
				interval = seconds / 2592000;
				if (interval > 1) {
					return parseInt(interval) + "月前";
				}
				interval = seconds / 86400;
				if (interval > 1) {
					return parseInt(interval) + "天前";
				}
				interval = seconds / 3600;
				if (interval > 1) {
					return parseInt(interval) + "小时前";
				}
				interval = seconds / 60;
				if (interval > 1) {
					return parseInt(interval) + "分钟前";
				}
				return "刚刚";
			}
		},
		methods: {
			GetTzList(type) {
				if (type == "reset") {
					this.TzList = [];
					this.page = 1;
				}
				$api.request({
					url: "lt/getTzList",
					method: 'POST',
					data: {
						key: this.key,
						openid: this.openid,
						school_id: this.school_id,
						page: this.page,
						search: this.search
					}
				}).then((res) => {
					let arr = res.data || [];
					this.isHas = arr.length > 10;
					arr.map(item => {
						this.TzList.push(item)
					})
					console.log(this.TzList,'55555')
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
			GetAddFollowingt() {
				this.pdsu == '1' ? this.user_id = '0' : this.user_id = this.user_id
				$api.request({
					url: "lt/addFollowing",
					method: 'POST',
					data: {
						key: this.key,
						openid: this.openid,
						user_id: this.user_id,
					}
				}).then((res) => {
					this.is_follow = res.data.is_follow
					console.log(res.data, '8888')
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
			GetAddZan(id,index) {
				var openid = uni.getStorageSync('openid');
				$api.request({
					url: "lt/addZan",
					method: 'POST',
					data: {
						key: this.key,
						openid: openid,
						tz_id: id,
						cm_id: ''
					}
				}).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					this.zan = res.data.zan
					if(res.data.zan=='0'){
						this.TzList[index].zan_num -= 1;
						this.TzList[index].zan=0
					}else{
						this.TzList[index].zan_num += 1;
						this.TzList[index].zan=1
					}
					console.log(this.zan,'4545445')
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
			GetUserInfo() {
				this.pdsu == '1' ? this.user_id = '0' : this.user_id = this.user_id
				$api.request({
					url: "lt/getUserInfo",
					method: 'POST',
					data: {
						key: this.key,
						openid: this.openid,
						user_id: this.user_id
					}
				}).then((res) => {
					console.log(res.data, '55555')
					this.UserInfo = res.data
					this.cover_image = res.data.cover_image
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
			tzDetails(avatar, nickname, id) {
				uni.navigateTo({
					url: `/pages/index/details?tz_id=${id}&avatar=${avatar}&nickname=${nickname}`
				})
			},

		}

	}
</script>

<style lang="scss" scoped>
	.onebox {
		min-height: 100vh;
		background-color: #F6F7F8;
	}

	.img-head {
		width: 100%;
		height: 400rpx;
	}

	.box3 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.box5 {
		display: flex;
		align-items: center;
	}

	.gz-big {
		display: flex;
		align-items: center;
		justify-content: right;
	}

	.gz {
		padding: 6rpx 30rpx;
		background-color: #63d6ba;
		border-radius: 50rpx;
		color: #fff;
		font-size: 22rpx;
	}

	.gz0 {
		padding: 6rpx 30rpx;
		background-color: #fff;
		border-radius: 50rpx;
		color: rgb(150, 150, 150);
		font-size: 22rpx;
		border: 1rpx solid rgb(150, 150, 150);
	}


	.img-tx {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;

	}

	.text-nc {
		font-weight: 600;
	}

	.middle {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0rpx 30rpx;
		position: relative;
		bottom: 100rpx;
	}

	.information {
		position: relative;
		bottom: 50rpx;
	}

	.text-information {
		font-size: 26rpx;
		position: relative;
		bottom: 30rpx;
	}

	.cssss {
		position: relative;
		bottom: 100rpx;
	}

	.box25 {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 30rpx;
		padding: 30rpx 20rpx;
	}

	.box24 {
		flex: 1;
	}

	.box7 {
		margin-left: 141rpx;
		display: flex;
		justify-content: right;
		align-items: center;
		flex-direction: column;
	}

	.img3 {
		width: 36rpx;
		height: 32rpx;
	}

	.img13 {
		width: 192rpx;
		height: 192rpx;
		border-radius: 10rpx;
	}

	.img14 {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0rpx;
	}

	.img15 {
		width: 30rpx;
		height: 30rpx;
		margin: 0 5rpx 0 20rpx;
	}

	.box88888 {
		display: flex;
		flex-wrap: wrap;
	}
	.img18 {
		width: 30rpx;
		height: 30rpx;
		margin-right: 0rpx;
	}
	
</style>